<template>
  <div style="width: 80%; margin: 40px auto">
    <h2 style="text-align: center">数据表的增删改查</h2>
    <el-row class="mb-4" style="float: right">
      <el-button type="primary" @click="setState('add', null)">新增</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="workno" label="工号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="idcard" label="身份证号" />
      <el-table-column prop="workaddress" label="工作地址" />
      <el-table-column prop="entrydate" label="时间" />
      <el-table-column fixed="right" label="Operations" width="180px">
        <template #default="scope">
          <el-button size="small" @click="setState('update', scope.row)"
            >Edit</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="centerDialogVisible"
      :title="state == 'add' ? '添加' : '编辑'"
      width="40%"
      align-center
    >
      <span>
        <el-form :model="form" label-width="120px">
          <el-form-item label="工号">
            <el-input :disabled="state=='update'" v-model="form.workno" placeholder="请输入工号" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.gender" placeholder="请输入性别" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" placeholder="请输入年龄" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.idcard" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="工作地址">
            <el-input v-model="form.workaddress" placeholder="请输入工作地址" />
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="form.entrydate" type="date" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit(state)">
            {{ state == "add" ? "添加" : "编辑" }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import axios from "axios";
import { reuestTableData, addTableData, delTableData ,editTableData } from "../api/index";
import { onMounted, reactive, ref } from "vue";
let tableData = ref();
// const tableData = [
//   {
//     date: "2016-05-03",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
// ];
const centerDialogVisible = ref(false); //弹框显示或隐藏
const form = ref({
  workno: "",
  name: "",
  gender: "",
  age: "",
  idcard: "",
  workaddress: "",
  entrydate: ""
});
const state = ref("add"); //数据添加或编辑状态
// 弹框状态
const setState = (type, row) => {
  centerDialogVisible.value = true;
  state.value = type;
  if(type == 'update'){
    form.value = {...row};
  }else{
   form.value.workno = ''
   form.value.name = ''
   form.value.gender = ''
   form.value.age = ''
   form.value.idcard = ''
   form.value.workaddress = ''
   form.value.entrydate = ''
  }
};

onMounted(() => {
  requestData();
});

async function requestData() {
  let data = await reuestTableData();
  tableData.value = data;
}

// 删除
const handleDelete = (index, row) => {
  console.log(index, row.workno);
  delTableData(JSON.stringify(row.workno));
  requestData();
};

const submit = (type) => {
  if (type == "add") {
    addTableData(form.value);
    requestData();
  }
  if(type == "update"){
    editTableData(form.value)
    requestData();
  }
  centerDialogVisible.value = false;
};
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>